<template>
  <div class="content-box">
    <div class="tab-box">
      <button class="mr-32" :class="showFOllow==true ? 'tab-btn1' : 'tab-btn'" @click="MyshowFollow">
        <icon-font type="icon-guanzhuon" class="mr-8" />我的关注
      </button>
      <button class="mr-32" :class="showFOllow==false ?'tab-btn1':'tab-btn'" @click="MyHideFOllow">
        <icon-font type="icon-wujiaoxing" class="mr-8" />关注我的
      </button>
    </div>
    <div class="MyConcenrn" v-if="showFOllow">
      <div class="top clearfix">
        <h2 class="">感兴趣的产品类别：</h2>
        <a-button type="primary" class="top-btn mt-10 mb-10" @click="Showmodelvisible">管理标签</a-button>
        <div class="mt-10 top-title clearfix">
          <div class="title-text row-ellipsis  f-left mb-10" v-for="(item,index) in LoveAttentionCategory" :title="item.categoryName" :key="index">{{item.categoryName}}</div>
        </div>
      </div>
      <!-- 我的关注 -->
      <div class="main">
        <h2>关注供需</h2>
        <div class="card-box">
          <!-- 第一个搜索form -->
          <a-form layout="inline" class="clearfix" v-if="changeTar == 1" :form="form" @submit="handleSubmit">
            <a-form-item label="关键字：">
              <a-input placeholder="请输入需求名称" v-decorator="['keyword', { initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="产品类别：">
              <a-select @change="productTypeOneChange" style="width: 230px;margin-right:10px" v-decorator="['productOneCategory', { initialValue: '' }]" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in reProducts" :value="item.id" :key="index">{{ item.categoryName }}</a-select-option>
              </a-select>
              <a-select @change="productTypeOneChange1" style="width: 230px" v-decorator="['productSecondCategory', { initialValue: '' }]" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in reProductsTwo" :value="item.categoryNo" :key="index">{{ item.categoryName }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="价格区间：">
              <a-input style="width: 120px; margin-right: 8px" v-decorator="['priceFrom', { initialValue: '' }]" />
              至
              <a-form-item>
                <a-input style="width: 120px; margin-left: 8px" v-decorator="['priceTo', { initialValue: '' }]" />
              </a-form-item>
            </a-form-item>
            <a-form-item label="截止时间">
              <a-range-picker :placeholder="['开始日期', '结束日期']" v-decorator="['Data']">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>
            <div class="flex mt-5" style="justify-content: flex-end">
              <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear">重置</a-button>
              <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
            </div>
          </a-form>
          <!-- 第二个搜索form -->
          <a-form layout="inline" class="clearfix" v-if="changeTar == 2" :form="form" @submit="handleSubmit">
            <a-form-item label="关键字：">
              <a-input placeholder="请输入产品名称" v-decorator="['keyword',{ initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="产品类别：">
              <a-select @change="productProOneChange" style="width: 230px;margin-right:10px" v-decorator="['productProOne', { initialValue: '' }]" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in reProducts" :value="item.id" :key="index">{{ item.categoryName }}</a-select-option>
              </a-select>
              <a-select @change="productProSecondChange" style="width: 230px" v-decorator="['productProSecond', { initialValue: '' }]" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in productProvideTwo" :value="item.categoryNo" :key="index">{{ item.categoryName }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="价格区间：">
              <a-input style="width: 120px; margin-right: 8px" v-decorator="['priceFrom']" />
              至
              <a-form-item>
                <a-input style="width: 120px; margin-left: 8px" v-decorator="['priceTo']" />
              </a-form-item>
            </a-form-item>
            <a-form-item label="供应上限：">
              <a-checkbox :checked="checkNick" @change="checkChange" v-decorator="['productIslimited']">
                不限
              </a-checkbox>
            </a-form-item>
            <div class="flex mt-5" style="justify-content: flex-end">
              <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear">重置</a-button>
              <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
            </div>
          </a-form>
          
          <!-- 第三个搜索form -->
          <a-form-model layout="inline" class="clearfix" v-if="changeTar == 3" :form="form" @submit="handleSubmit">
            <a-form-model-item label="关键字：">
              <a-input placeholder="请输入解决方案名称" v-model="MyMessageSoult.keyword" />
            </a-form-model-item>

            <a-form-model-item label="解决方案状态：">
              <a-select style="width: 230px;margin-right:10px" v-model="MyMessageSoult.solutionStatus" placeholder="请选择">
                <a-select-option :value="0">请选择</a-select-option>
                <a-select-option :value="1">已上架</a-select-option>
                <a-select-option :value="2">未上架</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-button class="f-right mt-5" type="primary" @click="SearchMySoult">搜索</a-button>
            <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear">重置</a-button>
          </a-form-model>

          <!-- 第四个搜索form -->
          <a-form layout="inline" class="clearfix" v-if="changeTar == 4" :form="form" @submit="handleSubmit">
            <a-form-item label="关键字：">
              <a-input placeholder="请输入企业名称" v-decorator="['keyword', { initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="关注状态：">
              <a-select style="width: 120px" v-decorator="['reFollow', { initialValue: '' }]" placeholder="请选择">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="item in reFollow" :value="item.value" :key="item.key">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="行业类别：">
              <a-select placeholder="请选择" v-model="JjhyYJValue" style="width: 200px" class="mr-32" @change="GetEjList">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in JjhyYJ" :key="index" :value="item.jjhyDm">{{ item.jjjy }}</a-select-option>
              </a-select>
              <a-select placeholder="请选择" v-model="JjhyEJValue" style="width: 120px" class="mr-32">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option v-for="(item, index) in JjhyEJ" :key="index" :value="item.jjhyDm">{{ item.jjjy }}</a-select-option>
              </a-select>
            </a-form-item>

            <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
            <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear">重置</a-button>
          </a-form>
        </div>

        <div>
          <a-tabs default-active-key="1" @change="callback">
            <!-- 我的关注第一个table -->
            <a-tab-pane key="1" tab="产品需求">
              <div class="action">
                <a-table :columns="tabStyle" :data-source="productRequest" :pagination="needPagination" :rowKey="(record) => record.id">
                  <template slot="handle" slot-scope="text, recode">
                    <a @click="showInformation(recode)">详情</a>
                    <a-divider type="vertical" />
                    <a @click="operation(recode)">编辑</a>
                  </template>
                  <a slot="name" slot-scope="text">{{ text }}</a>
                  <span slot="action" slot-scope="text, record">
                    <a @click="seeEdit(record)" style="margin-right: 32px">查看详情</a>
                    <a @click="handleEdit(record)">取消关注</a>
                  </span>
                </a-table>
              </div>
            </a-tab-pane>
            <!-- 我的关注第二个table -->
            <a-tab-pane key="2" tab="产品供应">
              <div class="action">
                <a-table :columns="columns" :data-source="productProvide" :pagination="productPagination" :rowKey="(record) => record.id">
                  <!-- isInterview,productIslimited -->
                  <span slot="isInterview" slot-scope="text,record">
                    {{text == 1?'面谈': (text == 0 || text == null)? record.price:''}}
                  </span>
                  <span slot="productIslimited" slot-scope="text,record">
                    {{text == 1?'不限': (text == 0 || text == null)? record.productCeiling:''}}
                  </span>
                  <template slot="handle" slot-scope="text, recode">
                    <a @click="showInformation(recode)">详情</a>
                    <a-divider type="vertical" />
                    <a @click="operation(recode)">编辑</a>
                  </template>
                  <a slot="name" slot-scope="text">{{ text }}</a>
                  <span slot="action" slot-scope="text, record">
                    <a @click="seeProduct(record)" style="margin-right: 32px">查看详情</a>
                    <a @click="handleEdit(record)">取消关注</a>
                  </span>
                </a-table>
              </div>
            </a-tab-pane>
            

            <!-- 我的关注第四个table -->
            <a-tab-pane key="3" tab="解决方案">
              <div class="action">
                <a-table :columns="colSoult" :data-source="mySoult" :pagination="SoultPagination" :rowKey="(record) => record.id">
                  <template slot="handle" slot-scope="text, recode">
                    <a @click="showInformation(recode)">详情</a>
                    <a-divider type="vertical" />
                    <a @click="operation(recode)">编辑</a>
                  </template>
                  <a slot="name" slot-scope="text">{{ text }}</a>
                  <span slot="action" slot-scope="text, record">
                    <a @click="seeSoult(record)" style="margin-right: 32px">查看详情</a>
                    <a @click="handleEditEnt(record)">取消关注</a>
                  </span>
                </a-table>
              </div>
            </a-tab-pane>

            <!-- 我的关注第三个table -->
            <!-- <a-tab-pane key="4" tab="企业">
              <div class="action">
                <a-table :columns="col" :data-source="myEnterprise" :pagination="enterPrisePagination" :rowKey="(record) => record.id">
                  <template slot="handle" slot-scope="text, recode">
                    <a @click="showInformation(recode)">详情</a>
                    <a-divider type="vertical" />
                    <a @click="operation(recode)">编辑</a>
                  </template>
                  <a slot="name" slot-scope="text">{{ text }}</a>
                  <span slot="action" slot-scope="text, record">
                    <a @click="seeEnterprise(record)" style="margin-right: 32px">查看详情</a>
                    <a @click="handleEditEnt(record)">取消关注</a>
                  </span>
                </a-table>
              </div>
            </a-tab-pane> -->
          </a-tabs>
        </div>
      </div>
    </div>

    <!-- 关注我的列表 -->
    <div class="FollowMe" v-else-if="!showFOllow">
      <div class="FollowMe-title">
        <span>关注我的</span>
      </div>
      <div class="mt-10 card-box">
        <!-- 关注我的form -->
        <a-form layout="inline" class="clearfix" :form="form" @submit="handleSubmit">
          <a-form-item label="关键字：">
            <a-input placeholder="请输入企业名称" v-decorator="['keyword']" />
          </a-form-item>
          <a-form-item label="关注状态：">
            <a-select style="width: 120px" v-decorator="['attentionStatus', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="item in reFollow" :value="item.value" :key="item.key">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="行业分类：">
            <a-select @change="selectChange" style="width: 230px;margin-right: 20px" v-decorator="['reProducts', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in reProducts" :value="item.id" :key="index">{{ item.categoryName }}</a-select-option>
            </a-select>
            <a-select style="width: 230px" v-decorator="['reProducts2', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in selectTypeTwo" :key="index" :value="item.categoryNo">
                {{ item.categoryName }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="fllowMeClear">重置</a-button>
        </a-form>
      </div>
      <!-- 关注我的table -->
      <div class="action">
        <a-table :columns="columns1" :data-source="concernMeTabel" :pagination="ipagination" :rowKey="(record) => record.id">
          <template slot="handle" slot-scope="text, recode">
            <a @click="showInformation(recode)">详情</a>
            <a-divider type="vertical" />
            <a @click="operation(recode)">编辑</a>
          </template>
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
            <a @click="lookContent(record)" style="margin-right: 32px">查看详情</a>
          </span>
        </a-table>
      </div>
    </div>
    <a-modal :centered="true" title="请选择您感兴趣的产品分类" cancelText="下次再说" okText="提交" :width="903" :closable="false" :visible="modelvisible" @ok="submit" wrapClassName="industrymode"
      @cancel="handleCancel">
      <div class="model_containt">
        <div class="person">

        </div>
        <div class="top_title">请选择您感兴趣的产品分类</div>
        <p class="tips_title">我们将为您智能推送相关信息</p>
        <div class="industrymode_list">
          <span v-for="(item,index) in industryList" :key="index" class="" v-if="index<12">
            <p class="item_industrymode row-ellipsis" :title="item.categoryName" :class="item.active ?'item_industrymode_active':''" @click="AddindustryList(index)">
              {{item.categoryName ?item.categoryName:'无'}}
            </p>
          </span>
          <div v-if="industryListShow">
            <span v-for="(item,index) in industryList" :key="index" class="" v-if="index>12">
              <p class="item_industrymode row-ellipsis" :title="item.categoryName" :class="item.active ?'item_industrymode_active':''" @click="AddindustryList(index)">
                {{item.categoryName ?item.categoryName:'无'}}
              </p>
            </span>
          </div>
        </div>
      </div>
      <div class="tr">
        <p v-if="industryListShow == false" @click="industryListShow = true">
          <a-button type="primary">
            展开
          </a-button>
        </p>
        <p v-if="industryListShow == true" @click="industryListShow = false">
          <a-button type="primary">
            收起
          </a-button>
        </p>
        <div class="more mt-10 tl">
          已选择<span class="num">{{industryActivelen.length}}</span> 项
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import { getJjhyList } from "@/apis/EntBase";
import { Icon } from "ant-design-vue";
import { getProductOneCategory } from "@/apis/productProvide";
import {
  productCategory,
  getMaterialsDemandList,
  getProductInfoPageList,
  cancelConcerns,
  cancelAttention,
  getMyConcernsList,
  getConcernsMeList,
  getSolutionInfoPageList,
} from "@/apis/user/MyConcerns";
import {
  AdduserAttentionCategory,
  AttentionCategorygetPageList,
} from "@/apis/user/userAttentionCategory";
import { getByParent } from "@/apis/Home";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_9swle2zinfa.js",
});
// 产品需求
const tabStyle = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "需求名称",
    dataIndex: "demandProductName",
  },
  {
    title: "产品类别",
    dataIndex: "categoryName",
  },
  {
    title: "预算价格(元)",
    // dataIndex: "price",
    align: "center",
    customRender: function (text, recode) {
      return recode.price + "元";
    },
  },
  {
    title: "需求企业",
    dataIndex: "demandEntName",
  },
  // {
  //   title: "需求状态",
  //   dataIndex: "demandStatus",
  //   customRender: function (text) {
  //     if (text == 1) {
  //       return "已解决";
  //     } else if (text == 2) {
  //       return "未解决";
  //     }
  //   },
  // },
  // {
  //   title: "截止时间",
  //   dataIndex: "expirationDate",
  //    ellipsis: true,
  // },
  {
    title: "截止日期",
    dataIndex: "isLongTime",
    // align:"center",
    ellipsis: true,
    customRender: function (text, recode) {
      if (text == 1) {
        return "长期有效";
      } else if (text == 0 || text == null) {
        return recode.expirationDate;
      }
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];
// 产品供应
const columns = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "产品名称",
    dataIndex: "productName",
  },
  {
    title: "产品类别",
    dataIndex: "categoryName",
  },
  {
    title: "价格(元)",
    dataIndex: "isInterview",
    align: "center",
    scopedSlots: { customRender: "isInterview" },
  },
  {
    title: "供应上限",
    dataIndex: "productIslimited",
    scopedSlots: { customRender: "productIslimited" },
    // customRender: function (text, record) {
    //   if (text == 1) {
    //     return "不限";
    //   } else if (text == 0 || text == null) {
    //     //应该显示productCeiling
    //     return record.productCeiling;
    //   }
    // },
  },
  {
    title: "需求企业",
    dataIndex: "entName",
  },
  // {
  //   title: "需求状态",
  //   dataIndex: "productStatus",
  //   customRender: function (text) {
  //     if (text == 1) {
  //       return "已解决";
  //     } else if (text == 2) {
  //       return "未解决";
  //     } else if (text == 3) {
  //       return "已失效";
  //     }
  //   },
  // },
  // {
  //   title: "截止时间",
  //   dataIndex: "publicDate",
  // },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];
// 企业
const col = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "企业名称",
    dataIndex: "entName",
  },
  {
    title: "企业地址",
    dataIndex: "entAddress",
  },
  {
    title: "关注状态",
    dataIndex: "isMutual",
    customRender: function (text) {
      if (text == 1) {
        return "单方关注";
      } else if (text == 2) {
        return "相互关注";
      }
    },
  },
  // {
  //   title: "截止时间",
  //   dataIndex: "publicDate",
  // },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

// 解决方案
const colSoult = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
 {
    title: "解决方案名称",
    dataIndex: "solutionName",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "解决方案编号",
    dataIndex: "solutionNo",
    // ellipsis: true,
    // width: 200,
  },

  {
    title: "供应企业",
    dataIndex: "entName",
    // ellipsis: true,
    // width: 200,
  },
  {
    title: "解决方案状态",
    dataIndex: "solutionStatus",
    customRender: function (text) {
      if (text == 1) {
        return "已上架";
      } else if (text == 2) {
        return "未上架";
      }
    },
  },
  // {
  //   title: "截止时间",
  //   dataIndex: "publicDate",
  // },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];
// const data = [];
const productRequest = []; //我的关注产品需求
const productProvide = []; //我的关注产品供应列表
const myEnterprise = []; //我的关注企业列表
const concernMeTabel = []; //关注我的

// for (let i = 1; i < 46; i++) {
//   data.push({
//     idNum: i,
//     productName: "交流变频电源",
//     categoryName: "电气机械和器材制造业",
//     price: "2000元",
//     entName: "深圳市某某电子商务公司",
//     productStatus: "1",
//     publicDate: "2020.09.23 18:00:00",
//   });
// }
// 关注我的企业
const columns1 = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "企业名称",
    dataIndex: "entName",
  },
  {
    title: "企业地址",
    dataIndex: "entAddress",
  },
  {
    title: "关注状态",
    dataIndex: "isMutual",
    customRender: function (text) {
      if (text == 1) {
        return "单方关注";
      } else if (text == 2) {
        return "互相关注";
      }
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];
const provinceData = ["制造业", "建筑业"];
const cityData = {
  制造业: ["制造业1", "制造业2", "制造业3"],
  建筑业: ["建筑业1", "建筑业2", "建筑业3"],
};
export default {
  data() {
    return {
      MyMessageSoult: {
        keyword: "",
        solutionStatus: 0,
      },
      LoveAttentionCategory: [], //感兴趣的产品类别
      industryListShow: false,
      productIslimited: 0, //供应上线
      checkNick: false,
      selectType: [],
      selectTypeTwo: [],
      modelvisible: false, //兴趣行业弹窗
      showFOllow: true,
      tabStyle,
      productRequest, //产品需求
      productRequestForm: {},
      productProvide, //产品供应
      productProvideForm: {},
      myEnterprise, //企业关注
      JjhyYJValue: "", //一级Value
      JjhyEJValue: "", //二级value
      JjhyZL: [], //总的国民数据
      JjhyYJ: [], //一级
      JjhyEJ: [], //二级
      myEnterpriseForm: {},
      col,
      colSoult,
      // data,
      columns,
      concernMeTabel,
      concernMeForm: {}, //关注我的企业
      columns1,
      changeTar: 1,
      demandStatus: [
        {
          label: "已解决",
          key: "1",
          value: 1,
        },
        {
          label: "未解决",
          key: "2",
          value: 2,
        },
      ],
      reStatus: [
        {
          label: "已上架",
          key: 1,
          value: 1,
        },
        {
          label: "已下架",
          key: 2,
          value: 2,
        },
      ],
      reFollow: [
        {
          label: "单方关注",
          key: "1",
          value: 1,
        },
        {
          label: "互相关注",
          key: "2",
          value: 2,
        },
      ],
      productOneCategory: "", //产品需求=>产品类别参数一
      productTwoCategory: "", //产品需求=>产品类别参数一
      reProducts: [], //产品需求=>产品类别一级菜单
      reProductsTwo: [], //产品需求=>产品类别二级菜单

      productProOne: "", //产品供应=>产品类别参数一
      productProTwo: "", //产品供应=>产品类别参数一
      productProvideTwo: [], //产品供应=>产品类别二级菜单
      // 产品需求分页
      needPagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onPageChangeNeed(current, pageSize),
        onChange: (page, pageSize) => this.onSizeChangeNeed(page, pageSize),
      },
      // 产品供应分页
      productPagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeProduct(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeProduct(page, pageSize),
      },
      // 企业分业
      enterPrisePagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeEnterPrise(current, pageSize),
        onChange: (page, pageSize) =>
          this.onPageChangeEnterPrise(page, pageSize),
      },

      // 解决方案
      SoultPagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeSoult(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeSoult(page, pageSize),
      },
      mySoult: [],
      // 已关注我的企业
      ipagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      provinceData,
      cityData,
      cities: cityData[provinceData[0]],
      secondCity: cityData[provinceData[0]][0],
      form: this.$form.createForm(this, { name: "coordinated" }),
      // 感兴趣行业
      industryList: [],
      industryActivelen: 0,
    };
  },
  created() {
    this.toGetMaterialsDemandList(); //我的关注产品需求
    this.toGetProductInfoPageList(); //我的关注产品供应
    this.toGetMyConcernsList(); //我的关注企业
    this.getJjhyList(); //我的关注企业一级
    this.toGetConcernsMeList(); //已关注我
    this.GetByParentList();
    this.getByParent();
    this.AttentionCategorygetPageList();
    this.TogetSolutionInfoPageList(); //我的关注，解决方案
  },
  methods: {
    MyshowFollow(){
      this.clear();
      this.productRequestForm={};
      this.toGetMaterialsDemandList();
      this.showFOllow = true;
    },
    MyHideFOllow(){
      this.clear();
      this.myEnterpriseForm={};
      this.toGetConcernsMeList();
      this.showFOllow = false;
    },
    // 产品需求=>产品类别选中
    productTypeOneChange(value) {
      this.productTwoCategory = "";
      if (value == "") {
        this.productOneCategory = "";
        this.form.setFieldsValue({
          productSecondCategory: "",
        });
        this.reProductsTwo = [];
        return;
      }
      this.reProducts.map((item, index) => {
        if (item.id == value) {
          this.productOneCategory = item.categoryNo.trim();
        }
      });
      let params = { pid: value };
      getProductOneCategory(params).then((res) => {
        if (res.code == 200) {
          this.form.setFieldsValue({
            productSecondCategory: '',
          });
          this.reProductsTwo = res.data;
        }
      });
    },
    productTypeOneChange1(value) {
      this.productTwoCategory = value;
    },
    // 产品供应=>产品类别选中
    productProOneChange(value) {
      this.productProTwo = "";
      if (value == "") {
        this.productProOne = "";
        this.form.setFieldsValue({
          productProSecond: "",
        });
        this.productProvideTwo = [];
        return;
      }
      this.reProducts.map((item, index) => {
        if (item.id == value) {
          this.productProOne = item.categoryNo.trim();
        }
      });
      let params = { pid: value };
      getProductOneCategory(params).then((res) => {
        if (res.code == 200) {
          // console.log(this.form.productSecondCategory);
          this.form.setFieldsValue({
            productProSecond: "",
          });
          this.productProvideTwo = res.data;
        }
      });
    },
    productProSecondChange(value) {
      this.productProTwo = value;
    },
    // 管理标签弹窗
    Showmodelvisible() {
      console.log(this.LoveAttentionCategory);
      console.log(this.industryList);
      this.LoveAttentionCategory.forEach((elementA) => {
        this.industryList.forEach((elementB) => {
          if (elementA.categoryNo == elementB.categoryNo) {
            elementB.active = true;
          }
        });
      });
      this.modelvisible = true;
    },
    // 获取我的关注
    AttentionCategorygetPageList() {
      let _params = {
        current: 1,
        size: 100,
      };
      AttentionCategorygetPageList(_params)
        .then((res) => {
          console.log("获取我关注的");
          console.log(res);
          if (res.code == 200) {
            this.LoveAttentionCategory = res.data.records;
            if (res.data.records.length > 0) {
              localStorage.setItem(
                "ProductIndustryCategory",
                JSON.stringify(res.data.records)
              );
            }
            this.industryActivelen = res.data.records;
          }
        })
        .catch((error) => {});
    },
    //新增我的关注  产品分类
    AdduserAttentionCategory() {
      console.log(this.industryActivelen);
      let _categoryNos = [];
      this.industryActivelen.forEach((item) => {
        _categoryNos.push(item.categoryNo);
      });
      let _params = {
        categoryNos: _categoryNos,
      };
      AdduserAttentionCategory(_params)
        .then((res) => {
          if (res.code == 200) {
            this.modelvisible = false;
            this.AttentionCategorygetPageList();
            this.getByParent();
          }
        })
        .catch((error) => {});
    },
    // 获取产品分类
    getByParent() {
      getByParent()
        .then((res) => {
          console.log("产品分类");
          console.log(res);
          let _arr = [];
          res.data.forEach((element) => {
            if (element.categoryName != null || element.categoryName != "") {
              this.$set(element, "active", false);
              _arr.push(element);
            }
          });
          this.industryList = _arr;
          console.log("this.industryList");
          console.log(this.industryList);
        })
        .catch((error) => {});
    },
    checkChange(e) {
      this.checkNick = e.target.checked;
      if (e.target.checked == true) {
        this.productIslimited = 1;
      } else {
        this.productIslimited = 0;
      }
    },
    // 产品一级分类下拉列表
    GetByParentList() {
      productCategory().then((res) => {
        if (res.code == 200) {
          this.reProducts = res.data;
        }
      });
    },
    // 渲染二级
    selectChange(value) {
      if (value == "") {
        this.selectTypeTwo = [];
        this.form.setFieldsValue({
          reProducts2: "",
        });
        // this.form.reProducts2 = ''
        return;
      }
      let params = { pid: value };
      productCategory(params).then((res) => {
        if (res.code == 200) {
          this.selectTypeTwo = res.data;
        }
      });
    },
    //我的关注产品需求分页列表
    toGetMaterialsDemandList() {
      let params = {
        size: this.needPagination.pageSize,
        current: this.needPagination.current,
        ...this.productRequestForm,
      };
      getMaterialsDemandList(params).then((res) => {
        if ((res.code == 200)) {
          this.productRequest = res.data.records;
          this.needPagination.total = res.data.total;
        }
      });
    },
    // 分页
    onPageChangeNeed(page, pageSize) {
      this.needPagination.current = page;
      this.toGetMaterialsDemandList();
    },
    onSizeChangeNeed(current, pageSize) {
      this.needPagination.pageSize = pageSize;
      this.needPagination.current = current;
      this.toGetMaterialsDemandList();
    },
    // 我的关注产品供应分页列表
    toGetProductInfoPageList() {
      let params = {
        size: this.productPagination.pageSize,
        current: this.productPagination.current,
        ...this.productProvideForm,

        // size: this.productPagination.pageSize,
        // current: this.productPagination.current,
        // categoryName: "",
        // keyword: "",
        // priceEnd: "",
        // priceStart: "",
        // productIslimited: 0,
        // productStatus: 0,
        // userId: "424ca1b5-fbf0-11ea-9219-005056b83959",
      };
      getProductInfoPageList(params).then((res) => {
        if (res.code == 200) {
          this.productProvide = res.data.records;
          this.productPagination.total = res.data.total;
        }
      });
    },
    // 分页
    onPageChangeProduct(page, pageSize) {
      this.productPagination.current = page;
      this.toGetProductInfoPageList();
    },
    onSizeChangeProduct(current, pageSize) {
      this.productPagination.pageSize = pageSize;
      this.productPagination.current = current;
      this.toGetProductInfoPageList();
    },
    // 我的关注企业获取国民竞技行业字段
    getJjhyList() {
      getJjhyList()
        .then((res) => {
          if (res.code == 200) {
            this.JjhyZL = res.data;
            res.data.forEach((element) => {
              if (element.fljb == "0") {
                this.JjhyYJ.push(element);
              }
            });
          }
        })
        .catch((error) => {});
    },
    // 获取二级
    GetEjList() {
      console.log(this.JjhyYJValue);
      let _arr = [];
      this.JjhyEJValue = "";
      this.JjhyZL.forEach((element) => {
        if (element.sjlbDm == this.JjhyYJValue) {
          _arr.push(element);
        }
      });
      this.JjhyEJ = _arr;
      console.log(this.JjhyEJ);
    },
    // 我的关注企业列表
    toGetMyConcernsList() {
      let params = {
        size: this.enterPrisePagination.pageSize,
        current: this.enterPrisePagination.current,
        ...this.myEnterpriseForm,
      };
      getMyConcernsList(params).then((res) => {
        if (res.code == 200) {
          this.myEnterprise = res.data.records;
          this.enterPrisePagination.total = res.data.total;
        }
      });
    },
    // 分页
    onPageChangeEnterPrise(page, pageSize) {
      this.enterPrisePagination.current = page;
      this.toGetMyConcernsList();
    },
    onSizeChangeEnterPrise(current, pageSize) {
      this.enterPrisePagination.pageSize = pageSize;
      this.enterPrisePagination.current = current;
      this.toGetMyConcernsList();
    },

    // 我的关注，解决方案

    //获取我的关注表-解决方案分页列表
    TogetSolutionInfoPageList() {
      let params = {
        size: this.SoultPagination.pageSize,
        current: this.SoultPagination.current,
        ...this.MyMessageSoult,
      };
      getSolutionInfoPageList(params)
        .then((res) => {
          if (res.code == 200) {
            this.SoultPagination.total = res.data.total;
            this.mySoult = res.data.records;
          }
        })
        .catch((error) => {});
    },
    SearchMySoult() {
      this.SoultPagination.current = 1;
      this.TogetSolutionInfoPageList();
    },
    // 分页
    onPageChangeSoult(page, pageSize) {
      this.SoultPagination.current = page;
      this.TogetSolutionInfoPageList();
    },
    onSizeChangeSoult(current, pageSize) {
      this.SoultPagination.pageSize = pageSize;
      this.SoultPagination.current = current;
      this.TogetSolutionInfoPageList();
    },
    //已关注我列表
    toGetConcernsMeList() {
      let params = {
        size: this.ipagination.pageSize,
        current: this.ipagination.current,
        ...this.concernMeForm,

        // keyword: "",
        // size: this.ipagination.pageSize,
        // current: this.ipagination.current,
        // entId: "11597c3c-8783-4a3d-b816-29fdd233a9c3",
        // isMutual:0,
        // userId: "551a8b4a-df54-4b9b-b0ab-8e6c1c24ff14",
      };
      getConcernsMeList(params).then(res => {
        if (res.code == 200) {
          this.concernMeTabel = res.data.records
          this.ipagination.total = res.data.total
        }
      });
    },
    // 分页
    onPageChange(page, pageSize) {
      this.ipagination.current = page;
      this.toGetConcernsMeList();
    },
    // 页容量改变
    onSizeChange(current, pageSize) {
      this.ipagination.pageSize = pageSize;
      this.ipagination.current = current;
      this.toGetConcernsMeList();
    },

    // 搜索
    handleSubmit(e) {
      e.preventDefault()
      // 我的关注产品需求搜索
      if (this.changeTar == 1 && this.showFOllow == true) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.Data != undefined) {
              var expirationDateStart = moment(values.Data[0]).format(
                "YYYY-MM-DD"
              );
              var expirationDateEnd = moment(values.Data[1]).format(
                "YYYY-MM-DD"
              );
            }
            this.productRequestForm = {
              keyword: values.keyword,
              demandStatus: values.demandStatus,
              productOneCategory: this.productOneCategory,
              productSecondCategory: this.productTwoCategory,
              // categoryName: values.reProducts,
              priceStart: values.priceFrom,
              priceEnd: values.priceTo,
              expirationDateStart,
              expirationDateEnd,
            };
            this.toGetMaterialsDemandList();
          }
        });
      }
      // 我的关注产品供应搜索
      else if (this.changeTar == 2 && this.showFOllow == true) {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.productProvideForm = {
              keyword: values.keyword,
              productStatus: values.reStatus,
              productOneCategory: this.productProOne,
              productSecondCategory: this.productProTwo,
              // categoryName: values.reProducts,
              priceStart: values.priceFrom,
              priceEnd: values.priceTo,
              productIslimited: this.productIslimited,
            };
            this.toGetProductInfoPageList();
          }
        });
      }
      // 我的关注企业
      else if (this.changeTar == 4 && this.showFOllow == true) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (this.JjhyEJValue == "" && this.JjhyYJValue == "") {
              this.myEnterpriseForm = {
                keyword: values.keyword,
                isMutual: values.reFollow,
                industryCode: "",
              };
            } else if (this.JjhyEJValue == "" && this.JjhyYJValue != "") {
              this.myEnterpriseForm = {
                keyword: values.keyword,
                isMutual: values.reFollow,
                industryCode: this.JjhyYJValue,
              };
            } else if (this.JjhyEJValue != "") {
              this.myEnterpriseForm = {
                keyword: values.keyword,
                isMutual: values.reFollow,
                industryCode: this.JjhyEJValue,
              };
            }
          }
          this.toGetMyConcernsList();
        });
      }
      // 关注我的企业
      else if (this.showFOllow == false) {
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log(values);
            if (values.reProducts2 == "") {
              this.concernMeForm = {
                keyword: values.keyword,
                isMutual: values.attentionStatus,
                industryCode: values.reProducts,
              };
            } else if (values.reProducts2 != "") {
              this.concernMeForm = {
                keyword: values.keyword,
                isMutual: values.attentionStatus,
                industryCode: values.reProducts2,
              };
            }
            this.toGetConcernsMeList();
          }
        });
      }
    },
    // 取消关注
    handleEdit(e) {
      let params = {
        id: e.id,
        operatorType: 2,
        objectType: this.changeTar,
      };
      cancelConcerns(params).then((res) => {
        if (res.code == 200) {
          switch (this.changeTar) {
            case 1:
              this.toGetMaterialsDemandList();
              this.$message.success("取消关注产品需求成功！");
              break;
            case 2:
              this.toGetProductInfoPageList();
              this.$message.success("取消关注产品供应成功！");
              break;
            case 3:
              this.toGetMyConcernsList();
              this.$message.success("取消关注企业成功！");
              break;
          }
        } else {
          this.$message.warning("取消关注失败");
        }
      });
    },
    // 取消企业关注
    handleEditEnt(e) {
      let params = {
        id: e.objectId,
        isAddAttention: false,
      };
      cancelAttention(params).then((res) => {
        if (res.code == 200) {
          switch (this.changeTar) {
            case 1:
              this.toGetMaterialsDemandList()
              this.$message.success("取消关注产品需求成功！")
              break;
            case 2:
              this.toGetProductInfoPageList()
              this.$message.success("取消关注产品供应成功！")
              break;
            case 3:
              this.TogetSolutionInfoPageList()
              this.$message.success("取消关注解决方案成功！")
              break;
            case 4:
              this.toGetMyConcernsList()
              this.$message.success("取消关注企业成功！")
              break;
          }
        } else {
          this.$message.warning("取消关注失败");
        }
      });
    },
    // 重置（我的关注）
    clear() {
      this.callback(this.changeTar)
    },
    // 重置（关注我的）
    fllowMeClear() {
      this.form.resetFields()
      this.selectChange('')
      this.myEnterpriseForm = {}
      this.toGetConcernsMeList()
    },
    callback(key) {
      this.checkNick = false
      this.form.resetFields()
      this.productTypeOneChange(this.productOneCategory)
      this.productProOneChange(this.productProOne)
      this.JjhyYJValue = ''
      this.JjhyEJValue = ''
      this.JjhyEJ = []
      if(key == 1) {
        this.productRequestForm = {};
        this.toGetMaterialsDemandList();
      }else if(key == 2) {
        this.productProvideForm = {};
        this.toGetProductInfoPageList();
      }else if(key == 4) {
        this.myEnterpriseForm = {};
        this.toGetMyConcernsList();
      }else{
        this.MyMessageSoult = {};
        this.TogetSolutionInfoPageList();
      }
      this.changeTar = Number(key);
    },
    handleProvinceChange(value) {
      this.cities = cityData[value];
      this.secondCity = cityData[value][0];
    },
    // 产品需求查看详情
    seeEdit(record) {
      let id = record.objectId;
      if (record.delStatus == 1) {
        this.$message.warning("该需求不存在");
        return;
      }
      if (
        record.auditStatus != 2 ||
        record.demandStatus == 1 ||
        Date.parse(record.expirationDate) < Date.now()
      ) {
        this.$message.warning("该需求已失效");
        return;
      }
      let routeData = this.$router.resolve({ path: "/MaterialDetails", query: { id } })
      window.open(routeData.href, "_blank");
    },
    // 产品供应查看详情
    seeProduct(record) {
      let id = record.objectId;
      if (record.delStatus == 1) {
        this.$message.warning("该产品不存在");
        return;
      }
      if (record.auditStatus != 2 || record.productStatus == 2) {
        this.$message.warning("该产品已下架");
        return;
      }
      let routeData = this.$router.resolve({ path: "/ProductContent", query: { id } })
      window.open(routeData.href, "_blank")
    },
    // 企业信息查看详情
    seeEnterprise(record) {
      let id = record.objectId
      let routeData = this.$router.resolve({ path: "/entdetails", query: { id } })
      window.open(routeData.href, "_blank")
    },
    // 解决方案
    seeSoult(record) {
      let id = record.objectId
      let routeData = this.$router.resolve({ path: '/ProgrammeContent', query: { id } })
      window.open(routeData.href, '_blank')
    },
    // 关注我的企业详情
    lookContent(record) {
      let id = record.objectId;
      let routeData = this.$router.resolve({ path: '/entdetails', query: { id } })
      window.open(routeData.href, '_blank')
    },
    // 切换感兴趣的行业
    AddindustryList(index) {
      this.industryList[index].active = !this.industryList[index].active;
      let _arr = [];
      this.industryList.forEach((element) => {
        if (element.active) {
          _arr.push(element);
        }
      });
      this.industryActivelen = _arr;
    },
    // 提交感兴趣的行业
    submit() {
      this.AdduserAttentionCategory();
    },
    // 取消感兴趣行业
    handleCancel() {
      this.industryList.forEach((element) => {
        element.active = false;
      });
      this.modelvisible = false;
    },
  },
  components: {
    IconFont,
  },
};
</script>

<style lang="less" scoped>
.tab-btn1 {
  cursor: pointer;
  width: 184px;
  height: 60px;
  background-color: #2a51bc;
  box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
  border-radius: 8px;
  color: #ffffff;
  font-size: 18px;
}
.content-box {
  .tab-box {
    margin-bottom: 24px;
    .tab-btn {
      cursor: pointer;
      width: 184px;
      height: 60px;
      background-color: #ffffff;
      box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
      border-radius: 8px;
      color: #606266;
      font-size: 18px;
      font-weight: 700;
    }
  }

  .MyConcenrn {
    .top {
      padding: 16px 24px;
      background-color: #fff;
      margin-bottom: 16px;
      h2 {
        font-size: 18px;
        color: #303133;
        font-weight: 700;
      }

      .top-title {
        cursor: pointer;
        padding: 24px;
        background-color: #f5f7fa;
        border-radius: 4px;
        font-size: @font14;
        line-height: 40px;
        text-align: center;
        span {
          color: #000000;
        }

        .title-text {
          width: 160px;
          height: 40px;
          padding: 0 10px;
          background-color: #2a51bc;
          border-radius: 24px;
          font-size: @font14;
          color: #fff;
          margin-right: 24px;
        }

        .top-btn {
          width: 100px;
          height: 40px;
          background-color: #188af1;
          border-radius: 4px;
        }
      }
    }

    .main {
      padding: 16px 24px;
      background-color: #ffffff;
      border-radius: 4px;
      span {
        a {
          color: #188af1;
        }
      }

      h2 {
        font-size: 22px;
        font-weight: 400;
        color: #303133;
        margin-bottom: 24px;
      }

      .card-box {
        padding: 16px;
        margin-bottom: 24px;
        background-color: #f5f7fa;
        border-radius: 4px;
      }
    }
  }

  .FollowMe {
    padding: 17px 24px;
    background: #fff;
    .FollowMe-title {
      &:nth-child(1) {
        font-size: 22px;
        color: #303133;
      }
    }

    .card-box {
      padding: 16px 19px;
      background-color: #f5f7fa;
      border-radius: 4px;
      margin-bottom: 24px;
    }

    .action {
      span {
        a {
          font-size: 14px;
          color: #188af1;
        }
      }
    }
  }
}
// 弹窗
.industrymode {
  .model_containt {
    padding: 30px 60px;
    font-size: 18px;
    letter-spacing: 0px;
    color: #909399;
    position: relative;
  }
  .person {
    width: 220px;
    height: 464px;
    background-size: 220px 464px;
    background-repeat: no-repeat;
    position: absolute;
    right: -140px;
    top: -80px;
  }
  .more {
    height: 59px;
    line-height: 59px;
    padding-left: 60px;
    background-color: #f3f6fe;
    .num {
      color: #188af1;
    }
  }
  .top_title {
    font-size: 36px;
    color: #303133;
  }

  .tips_title {
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #c0c4cc;
    margin-top: 20px;
  }

  .industrymode_list {
    margin-top: 30px;
    .item_industrymode {
      width: 153px;
      height: 48px;
      padding: 0 10px;
      background-color: #ffffff;
      border-radius: 24px;
      border: solid 1px #dcdfe6;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #909399;
      margin-top: 32px;
      margin-right: 30px;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }

    .item_industrymode_active {
      width: 153px;
      height: 48px;
      background-color: #2a51bc;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #ffffff;
      margin-top: 32px;
      margin-right: 30px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>